<template>
  <div class="app-container">
    <div class="search-bar">
      <!--多条件查询表单-->
      <el-form :inline="true" class="demo-form-inline" size="mini">
        <el-form-item label="井号">
          <el-input
            v-model="searchData.wellName"
            clearable
            placeholder="请输入井号"
            style="width: 130px"
          />
        </el-form-item>

        <el-form-item label="作业区">
          <el-select
            v-model="searchData.blockName"
            clearable
            filterable
            placeholder="请选择作业区"
            style="width: 130px"
          >
            <el-option
              v-for="(item, i) in opeArea"
              :key="i"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="searchData.startTime"
            placeholder="选择开始时间"
            value-format="yyyy-MM-dd"
            type="date"
            style="width: 150px"
          />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="searchData.endTime"
            placeholder="选择截止时间"
            value-format="yyyy-MM-dd"
            type="date"
            style="width: 150px"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="search()"
          >查询</el-button>
          <el-button type="default" @click="reset()">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <el-table :data="tableData" border style="width:100%">
        <el-table-column
          prop="create_date"
          label="日期"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="block_id"
          label="作业区"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="object_id"
          label="车号"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="well_name"
          label="井号"
          header-align="center"
          align="center"
        />
      </el-table>
      <Pagination
        :page.sync="page"
        :limit.sync="limit"
        :total="total"
        @changePage="getListPage1(arguments)"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/pagination.vue'
export default {
  components: { Pagination },
  data() {
    return {
      searchData: {
        wellName: '',
        blockName: '',
        startTime: '',
        endTime: ''
      },
      tableData: [],
      page: 1,
      limit: 10,
      total: 0,
      opeArea: ['第一采油作业区','第二采油作业区', '第三采油作业区','第五采油作业区','第七采油作业区','第八采油作业区','第九采油作业区','运行维护一中心']
    }
  },
  created() {
    this.getListPage(this.page, this.limit, this.searchData)
  },
  methods: {
    getListPage(pageNum, pageSize, data) {
      this.$http.post('/tRealtime/queryQuality', { pageSize, pageNum, data }).then(({ data: { data: res }}) => {
        this.tableData = res.records
        this.total = res.total
      })
    },
    //页码变动
    getListPage1(msg){
      let pageNum=msg[0]
      let pageSize=msg[1]
      let data=this.searchData
      this.$http.post('/tRealtime/queryQuality', { pageSize, pageNum, data }).then(({ data: { data: res }}) => {
        this.tableData = res.records
        this.total = res.total
      })
    },
    //每页记录数变动
    handleSizeChange(size){
      let pageSize=this.page
      let pageNum=size
      let data=this.searchData
      this.$http.post('/tRealtime/queryQuality', { pageSize, pageNum, data }).then(({ data: { data: res }}) => {
        this.tableData = res.records
        this.total = res.total
      })
    },
    search() {
      this.getListPage(this.page, this.limit, this.searchData)
    },
    reset() {
      this.searchData = {}
    }
  }
}
</script>

<style scoped>

</style>
